<template>
<div>
    <basic-container>
        <el-row>
            <el-col>
                返回
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-between" align="middle">
            <el-col :span="18">
                <el-col :span="1">
                    <span class="el-icon-message"></span>
                </el-col>
                <el-col :span="23">
                    任务id:1
                </el-col>
            </el-col >
            <div>
                <el-button size="mini">审批拒绝</el-button>
                <el-button type="primary" size="mini">审批通过</el-button>
            </div>

        </el-row>
        <el-row  type="flex" class="row-bg" justify="space-between">
            <el-col :span="18">
                <el-col :span="1">
                </el-col>
                <el-col :span="3">
                    任务名称：
                </el-col>
                <el-col :span="7">
                    北京移动国网电费联名会员
                </el-col>
                <el-col :span="3">
                    任务类型：
                </el-col>
                <el-col :span="7">
                    会员业务
                </el-col>
            </el-col >
            <div>状态</div>
        </el-row>
        <el-row  type="flex" class="row-bg" justify="space-between">
            <el-col :span="18">
                <el-col :span="1">
                </el-col>
                <el-col :span="3">
                    创建时间：
                </el-col>
                <el-col :span="7">
                    2017-01-10 12:00:00
                </el-col>
                <el-col :span="3">
                    流程名称：
                </el-col>
                <el-col :span="7">
                    新增会员流程
                </el-col>
            </el-col >
            <div>待审批</div>
        </el-row>
    </basic-container>
    <basic-container>
        <el-row>
            <el-col>
                业务详情
            </el-col>
        </el-row>
        <el-row>
            <router-view />
        </el-row>
    </basic-container>
    <basic-container>
        <el-row>
            <el-col>
                审批流程
            </el-col>
        </el-row>
        <el-row>
            <el-col style="height:400px">
                <el-steps direction="vertical" :active="2">
                    <el-step title="起草人" icon="el-icon-user" description="同意  2022-02-22 22:22:22">
                        <template slot="title">
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>起草人</span>
                            </div>
                        </template>
                        <!-- <template slot="icon">
                            丨
                        </template> -->
                    </el-step>
                    <el-step title="部门领导" icon="el-icon-user" description="同意  2022-02-22 22:22:22">
                        <template slot="title">
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>部门领导</span>
                            </div>
                        </template>
                    </el-step>
                    <el-step title="大领导1、大领导2" icon="el-icon-user" description="审批中">
                        <template slot="title">
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>大领导1</span>
                            </div>
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>大领导2</span>
                            </div>
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>大领导2</span>
                            </div>
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>大领导2</span>
                            </div>
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>大领导2</span>
                            </div>
                        </template>
                    </el-step>
                    <el-step title="最终审批" icon="el-icon-user" description="待审批">
                        <template slot="title">
                            <div>
                                <img src="http://jft-middleground.oss-cn-beijing.aliyuncs.com/upload/20220212/8e516beacb8ad1c0518cafd3d4a408f3.jpg" alt="大头贴">
                                <span>部门领导</span>
                            </div>
                        </template>
                    </el-step>
                    <el-step title="审批结束" icon="el-icon-check"></el-step>
                </el-steps>
            </el-col>
        </el-row>
    </basic-container>
</div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    computed:{

    },
    methods:{

    }
}
</script>

<style lang="scss" scoped>
:deep( .el-step.is-vertical .el-step__main){
    display: flex;
    flex-direction: row;
    .el-step__title{
        width:400px;
        margin-right: 20px;
        display: flex;
        overflow-x: scroll;
        &>div{
            flex:0;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            span{
                text-align: center;
                width:70px
            }
        }

    }
    .el-step__description{
        line-height: 36px;
    }
}
</style>
